<template>
  <div class="profile-sub-tabs my-tabs">
    <div v-for="tab in tabs" :key="tab.key" class="my-tabs-item">
      <router-link
        :to="{ path: $route.path, query: { type: tab.key } }"
        class="my-tabs-link"
        :class="{ 'is-active': ($route.query.type || defaultTab) === tab.key }"
      >{{ tab.label }}</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'profile-sub-tabs',
  props: {
    tabs: Array,
    defaultTab: String,
  },
};
</script>

<style lang="scss">
.profile-sub-tabs {
  display: flex;
  flex-wrap: nowrap;
  padding-left: 16px;

  .my-tabs-item {
    flex-shrink: 0;
    padding: 0 12px;

    &.is-active {
      font-weight: 600;
    }
  }

  .my-tabs-link {
    font-size: 15px;
  }
}
</style>
